<template>
  <div class="app-container">
    <!-- <Header></Header> -->
    <div style="transform: translate(0%, 5%); position: relative">
      <el-carousel :interval="3000" arrow="always">
        <el-carousel-item v-for="(item, index) in urls" :key="index">
          <el-image style="width: inherit; height: inherit" :src="item.url">
          </el-image>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="top">
      <h2>渔业资源资产价格评估信息管理系统</h2>
    </div>
    <div class="style">
      <div class="menu_style">
        <el-row
          type="flex"
          class="row-bg"
          justify="space-around"
          style="margin-top: 50px"
        >
          <el-col :span="6">
            <router-link :to="'/reservoirinformation'">
              <div class="link_type1 btn_style">
                <img src="../../public/img/2.png" alt="" />
                水库、湖泊等大水面渔业技术经济资源信息共享系统
              </div>
            </router-link>
          </el-col>
          <el-col :span="6">
            <router-link :to="'/sheet'">
              <div class="link_type2 btn_style">
                <img src="../../public/img/3.png" alt="" />
                海底滩涂增养殖技术经济资源信息共享系统
              </div>
            </router-link>
          </el-col>
          <el-col :span="6">
            <router-link :to="'/information'">
              <div class="link_type3 btn_style">
                <img src="../../public/img/4.png" alt="" />
                工厂化育苗、养殖技术经济资源信息共享系统
              </div>
            </router-link>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="6">
            <router-link :to="'/netboxinformation'">
              <div class="link_type4 btn_style">
                <img src="../../public/img/5.png" alt="" />
                网箱育苗、养殖技术经济资源信息共享系统
              </div>
            </router-link>
          </el-col>
          <el-col :span="6">
            <router-link :to="'/chitangyumiao'">
              <div class="link_type5 btn_style">
                <img src="../../public/img/6.png" alt="" />
                池塘育苗、养殖技术经济资源信息共享系统
              </div>
            </router-link>
          </el-col>
          <el-col :span="6">
            <router-link :to="'/tezhong'">
              <div class="link_type6 btn_style">
                <img src="../../public/img/7.png" alt="" />
                特种育苗、养殖技术经济资源信息共享系统
              </div>
            </router-link>
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- <Foot></Foot> -->
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/halfmoon@1.1.1/js/halfmoon.min.js">
</script>
<script>
import Foot from "@/components/Foot";
import Header from "@/components/Header";
export default {
  name: "index",
  components: {
    Foot,
    Header,
  },
  data() {
    return {
      urls: [
        { url: require("../../public/img/lunbo1.png") },
        { url: require("../../public/img/lunbo2.png") },
        { url: require("../../public/img/lunbo3.png") },
      ],
    };
  },
  methods: {
    toshuiku() {
      //水库等大水面渔业技术经济资源信息共享系统
      // this.$tab.openPage("水库等大水面渔业技术经济资源信息共享系统", "/skgxxt");
      this.$router.push({ path: "/shouye/skgxxt" });
    },
  },
};
</script>


<style scoped lang="scss">
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

a {
  text-decoration: none; //没有文本装饰
}
.container {
}

.top {
  text-align: center;
  //background-color: #383847;
}

//中间内容样式
.main {
  padding-bottom: 10px;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 30px 0;
  //background-color: #5f89d1;
}

.link_type1 {
  //background-color: #018efe;
  // color: #fcd321;
  text-align: left; //text-align: center;
  padding: 20px 0px 10px 162px;
  border-radius: 0px;
  font-size: 30px;
  font-weight: 700;
  // background: url("../../public/img/2.png");
  // background-size:160px 150px;
  background-position: left;
  background-repeat: no-repeat;
  /* 选项1：图片将覆盖整个容器 */
  /* background-size: contain; 选项2：图片将缩放以适应容器 */
  /* background-size: 100px 100px; 选项3：指定具体的宽度和高度 */
  /* background-size: 50% 50%; 选项4：使用百分比来指定大小 */
}
//.link_type:hover{
//  background: url("../../public/img/2.jpg");
//}
.link_type2 {
  // background-color: #018efe;
  // color: #fcd321;
  text-align: left; //text-align: center;
  padding: 20px 20px 20px 170px;
  border-radius: 0px;
  font-size: 30px;
  font-weight: 700;
  // background: url("../../public/img/3.png");
  // background-size:100px 100px;
  background-position: left;
  background-repeat: no-repeat;
  /* 选项1：图片将覆盖整个容器 */
  /* background-size: contain; 选项2：图片将缩放以适应容器 */
  /* background-size: 100px 100px; 选项3：指定具体的宽度和高度 */
  /* background-size: 50% 50%; 选项4：使用百分比来指定大小 */
}
.link_type3 {
  // background-color: #018efe;
  //  color: #fcd321;
  text-align: left; //text-align: center;
  padding: 20px 0px 10px 162px;
  border-radius: 0px;
  font-size: 30px;
  font-weight: 700;
  //  background: url("../../public/img/4.png");
  //  background-size:100px 100px;
  background-position: left;
  background-repeat: no-repeat;
  /* 选项1：图片将覆盖整个容器 */
  /* background-size: contain; 选项2：图片将缩放以适应容器 */
  /* background-size: 100px 100px; 选项3：指定具体的宽度和高度 */
  /* background-size: 50% 50%; 选项4：使用百分比来指定大小 */
}
.link_type4 {
  // background-color: #018efe;
  // color: #fcd321;
  text-align: left; //text-align: center;
  padding: 20px 60px 50px 162px;
  border-radius: 0px;
  font-size: 30px;
  font-weight: 700;
  // background: url("../../public/img/5.png");
  // background-size:100px 100px;
  background-position: left;
  background-repeat: no-repeat;
  /* 选项1：图片将覆盖整个容器 */
  /* background-size: contain; 选项2：图片将缩放以适应容器 */
  /* background-size: 100px 100px; 选项3：指定具体的宽度和高度 */
  /* background-size: 50% 50%; 选项4：使用百分比来指定大小 */
}
.link_type5 {
  // background-color: #018efe;
  //  color: #fcd321;
  text-align: left; //text-align: center;
  padding: 20px 0px 10px 170px;
  border-radius: 0px;
  font-size: 30px;
  font-weight: 700;
  //  background: url("../../public/img/6.png");
  //  background-size:100px 100px;
  background-position: left;
  background-repeat: no-repeat;
  /* 选项1：图片将覆盖整个容器 */
  /* background-size: contain; 选项2：图片将缩放以适应容器 */
  /* background-size: 100px 100px; 选项3：指定具体的宽度和高度 */
  /* background-size: 50% 50%; 选项4：使用百分比来指定大小 */
}
.link_type6 {
  // background-color: #018efe;
  // color: #fcd321;
  text-align: left; //text-align: center;
  padding: 20px 0px 10px 170px;
  border-radius: 0px;
  font-size: 30px;
  font-weight: 700;
  // background: url("../../public/img/7.png");
  // background-size:100px 100px;
  background-position: left;
  background-repeat: no-repeat;
  /* 选项1：图片将覆盖整个容器 */
  /* background-size: contain; 选项2：图片将缩放以适应容器 */
  /* background-size: 100px 100px; 选项3：指定具体的宽度和高度 */
  /* background-size: 50% 50%; 选项4：使用百分比来指定大小 */
}
// 底部样式
.foot {
  position: fixed;
  bottom: 10cm;
  left: 0;
  right: 0;
  background-color: #383847;
  text-align: center;
  color: #ffffff;
  padding: 10px 0;
}

.foot-p {
  .span {
    margin-right: 10%;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 50px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
::v-deep .el-carousel__container {
  position: relative;
  height: 550px ;
}
.menu_style {
  margin: 50px 0;
  box-shadow: 7px 5px 13px #ddd;
  border-radius: 10px;
}
h2 {
  font-family: Arial, sans-serif;
  color: #333;
  font-size: 60px;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-bottom: 2px solid #333;
  padding-bottom: 10px;
  margin-top: 80px;
}
.btn_style {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 50px 20px;
  font-size: 25px;
  background-color: #f8f9f9;
  color: #645858;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  img {
    width: 100px;
    height: 100px;
    margin-right: 10px;
  }
}
.btn_style:hover {
  background-color: #e6f9f9;
}
</style>
